import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

export default class IconButton extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={styles.Btn}>
        <TouchableOpacity style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}
                          onPress={() => this.props.onPress(this.props.type)}>
          <View style={styles.BtnIcon}>
            <Image source={this.props.image}
                   style={{width: 30, height: 30}}/>
          </View>
          <View style={styles.BtnText}>
            <Text style={{fontSize: this.props.fontSize}}>{this.props.text}</Text>
          </View>
          <View style={styles.BtnArrow}>
            <Text style={{fontSize: 20}}>{'>'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  Btn: {
    flex: 1,
    borderBottomWidth: 0.5,
    borderBottomColor: 'rgba(178, 180, 180, 1.00)',
  },
  BtnIcon: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  BtnText: {
    flex: 4,
    paddingLeft: 15,
  },
  BtnArrow: {
    flex: 1,
  },
});